<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div>
    <template  v-if="routerPath=='roles'">
       <div v-loading="loading">
        <!-- 操作 -->
        <!--工具条-->
        <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">
            <el-form-item class="table_input">
              <el-input v-model="filters.name" placeholder="输入角色名称/角色描述检索"></el-input>
            </el-form-item>
            <el-form-item class="table_i">
              <el-button type="primary" v-on:click="fetchData"><i class="el-icon-search"></i></el-button>
            </el-form-item>
            <el-form-item class="table_btn_r" >
              <el-button class="table_btn_r"  v-has="[role.add]" type="primary" @click="handleAdd">添加角色</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <div class="operation">
    <!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
          <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
          <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
          <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

        </div>
        <!-- table start  -->
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="roleName" label="角色名称" width="220">
          </el-table-column>
          <el-table-column prop="roleDesc" label="角色描述">
          </el-table-column>
         
          <el-table-column label="操作" width="320" align="center">
            <template slot-scope="scope">
            <!--   <el-button size="mini" type="info">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button> -->
              <span class="span_btn" v-if="isReleUser"   @click="releUsers(scope.$index, scope.row)" >关联用户</span>
              <span class="span_line" v-if="isReleUser && isReleGroup ">|</span>
              <span class="span_btn" v-if="isReleGroup"   @click="releGroup(scope.$index, scope.row)">关联分组</span>
              <span class="span_line" v-if="isReleGroup && isReleAuth">|</span>
              <span class="span_btn"  v-if="isReleAuth"   @click="releAuth(scope.$index, scope.row)" >添加权限</span>             
               <span class="span_line" v-if="isReleAuth && isEdit">|</span>
              <span class="span_btn" v-if="isEdit" @click="handleEdit(scope.$index, scope.row)" >编辑</span>
              <span class="span_line" v-if="isEdit && isDel">|</span>
              <span class="span_btn span_btn_del" v-if="isDel"  @click="handleDel(scope.$index, scope.row)" >删除</span>

            </template>
          </el-table-column>
        </el-table>
        <!-- table end  -->
        <!-- 新增页面 -->
         <el-dialog title="添加角色" class="form_part form_part_roles" :visible.sync="addFormVisible"  :close-on-click-modal="false">
          <el-form :model="addForm" label-width="83px" :rules="addFormRules" ref="addForm">
            <!-- <div class="form_left"> -->
              <el-form-item label="角色名:" prop="roleName">
                <el-input v-model="addForm.roleName" auto-complete="off" max="15"></el-input>
              </el-form-item>
              
              <el-form-item label="角色描述:" prop="roleDesc">
                <el-input type="textarea" v-model="addForm.roleDesc" placeholder="角色描述"></el-input>
              </el-form-item>
            <!-- </div> -->
          
           
            
            <!-- <el-form-item label="年龄">
              <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
            </el-form-item>
            <el-form-item label="地址">
              <el-input type="textarea" v-model="addForm.addr"></el-input>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
            <el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">保存</el-button>
          </div>
        </el-dialog>


         <!-- 编辑页面 -->
         <el-dialog title="编辑角色" class="form_part form_part_roles" :visible.sync="editFormVisible"  :close-on-click-modal="false">
          <el-form :model="editForm" label-width="83px" :rules="editFormRules" ref="editForm">
            <el-form-item label="角色名:" prop="roleName">
              <el-input v-model="editForm.roleName" auto-complete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="角色描述:" prop="roleDesc">
              <el-input type="textarea" v-model="editForm.roleDesc" placeholder="角色描述"></el-input>
            </el-form-item>
 
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
            <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">保存</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <template v-else>
        <router-view></router-view>
      
    </template>
  </div>
 
</template>

<script>
import * as role from '../api/role';

let myMixin = {
  data: function() {
    return { role }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleUser:true,
      isReleGroup:true,
      isReleAuth:true,
      isEdit:true,  
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',      
      filters:{name:''},//搜索表单
      addFormVisible:false,//新增页面是否显示
      addForm:{},//新增页面数据
      editForm:{},//新增页面数据
      editFormVisible:false,//编辑页面是否显示
      addFormRules:{
        roleName: [
            { required: true, message: '请输入角色', trigger: 'blur' }
          ],
        roleDesc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      editFormRules:{
        roleName: [
            { required: true, message: '请输入角色', trigger: 'blur' }
          ],
        roleDesc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      addLoading:false,//
      editLoading:false,//
      list: [],
      canReset: true,
      loading: false,
      roleId:''
    }
  },
  methods: {
    releUsers(index,row){
      //关联用户
       this.routerPath='releusers';
       this.$router.push({path:'/authlist/roles/releusers',query: {id: row.roleId}})

    },
    releGroup(index,row){
      //关联分组
      this.routerPath='relegroup';
       this.$router.push({path:'/authlist/roles/relegroup',query: {roleId: row.roleId}})

    },
    releAuth(index,row){
      //添加权限
      this.routerPath='authority';
       this.$router.push({path:'/authlist/roles/addauthority',query: {roleId: row.roleId}})

    },
    getUsers(){
      //获取用户列表数据
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = { id: row.roleId };
        role.remove.r(para).then((res) => {
            if(res.data.retCode==1){
              //删除成功
              this.$message('删除成功');


              this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
        });
        
      }).catch(() => {

      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.roleId=row.roleId;
        let para={
        roleId:row.roleId
       }
        role.info.r(para).then((res) => {
          if(res.data.retCode==1){
              this.editForm=res.data.data;
          }else{
            this.$message(res.data.retMsg);
          }              
      })
    },
    editSubmit:function(){
      //编辑数据提交
      this.$refs.editForm.validate((valid) => {
          if (valid) {
             let para = {
              roleId:this.roleId,
              roleName:this.editForm.roleName,
              roleDesc:this.editForm.roleDesc
           
            };
            // console.log(qs.stringify(para));
            // return;
            role.modify.r(para).then((res) => {
              if(res.data.retCode==1){
                //编辑用户成功
                this.editFormVisible = false;
                this.$message('编辑成功');

                this.fetchData();
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },
    //显示新增界面
    handleAdd: function () {
      // this.$router.push({path:"/add"});
     this.addFormVisible = true;
    
    },
    addSubmit:function(){
      //新增数据提交     
      this.$refs.addForm.validate((valid) => {
        if (valid) {
           let para = {
            roleName:this.addForm.roleName,
            roleDesc:this.addForm.roleDesc
        
          };
          // console.log(qs.stringify(para));
          // return;
          role.add.r(para).then((res) => {
            if(res.data.retCode==1){
              //添加用户成功
              this.addFormVisible = false;

              this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
          }).catch((res)=>{
          });
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    },
    fetchData(init) {
      this.loading = true;
      if(!this.$_has([role.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          keyword:this.filters.name
        };
      role.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data.list;
        this.loading = false;
      })
     
    },
    requestNotAllowed: function(){
      role.notAllowed.r();
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": function(){
      this.routerPath=this.$route.path.split("/").pop();

    }
  },
  created() {

    this.isReleUser=this.$_has([role.releUser]);
    this.isReleGroup=this.$_has([role.releGroupRole]);
    this.isReleAuth=this.$_has([role.addAuthRole])
    this.isEdit=this.$_has([role.modify]);
    this.isDel=this.$_has([role.remove]);

    this.fetchData(true);
    this.routerPath=this.$route.path.split("/").pop();

  }
}
</script>